<template>
  <v-spin
    :spinning="spinLoading"
    :tip="textLoading"
  >
    <div class="current-content">
      <div class="middle-content ptb-10">
        <v-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          layout="inline"
          class="form-fixed-width form-style-two"
        >
          <fieldsetLegend
            title="内容1"
            :titleFontSize="14"
            class="p-10"
            :border="fieldsetLegendBorder"
          >
            <v-form-model-item label="Field A" prop="email">
              <v-input
                ref="email"
                placeholder="input placeholder"
                v-model="form.email"
              ></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field B" prop="password">
              <v-input
                ref="password"
                placeholder="input placeholder"
                v-model="form.password"
              ></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field c">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field d">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field e">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field f">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field g">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field i">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item
              label="Field l"
              v-form-width="{ labelWidth: 90, wrapperWidth: 425 }"
            >
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
          </fieldsetLegend>
          <fieldsetLegend
            title="内容2"
            :titleFontSize="14"
            class="p-10"
            :border="fieldsetLegendBorder"
          >
            <v-form-model-item label="Field A">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field B">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field c">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field d">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field e">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field f">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field g">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field i">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item
              label="Field l"
              v-form-width="{ labelWidth: 90, wrapperWidth: 425 }"
            >
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
          </fieldsetLegend>
          <fieldsetLegend
            title="内容3"
            :titleFontSize="14"
            class="p-10"
            :border="fieldsetLegendBorder"
          >
            <v-form-model-item label="Field A">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field B">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="Field c">
              <v-input placeholder="input placeholder"></v-input>
            </v-form-model-item>
            <v-form-model-item label="">
              <v-button type="primary" @click="handleSubmit">提 交</v-button>
            </v-form-model-item>
          </fieldsetLegend>
        </v-form-model>
      </div>
    </div>
  </v-spin>
</template>

<script>
export default {
  name: "formTemplate",
  components: {},
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  data() {
    return {
      textLoading: "",
      loadingTextObj: {
        loading: "页面初始化中...",
        updata: "数据提交中...",
      },
      spinLoading: true,
      fieldsetLegendBorder: {
        left: false,
        right: false,
        top: true,
        bottom: false,
      },
      form: { email: "", password: "" },
      rules: {
        email: [
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input your password!",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    //初始化
    this.init();
  },
  methods: {
    openLoading(text) {
      this.textLoading = text;
      this.spinLoading = true;
    },
    init() {
      this.openLoading(this.loadingTextObj.loading);

      setTimeout(() => {
        this.spinLoading = false;
      }, 1000);
    },
    handleSubmit() {
      let validatorList = [];
      let errRefs = "";
      this.$refs.ruleForm.validate((valid, obj) => {
        if (!valid) {
          _.forIn(obj, (value, key) => {
            if (errRefs == "") errRefs = key;
            validatorList.push(value[0].message);
          });
        }
      });
      validatorList.length &&
        this.util.showFormErrorMessage({
          validList: validatorList,
          vm: this,
          errRefs,
        });
    },
  },
  activated() {},
  deactivated() {},
};
</script>

<style lang="less" scoped>
</style>